<template>
  <div class="pages warehousingstatistics">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form>
           <el-row>
               <el-col :span="6">
                <el-form-item label="商户:" label-width="100px">
                  <el-input class="input" :disabled="true" clearable v-model="selectdata.merchant" size="small" placeholder="输入商户编号/名称"></el-input>
                </el-form-item>
               </el-col>
               <el-col :span="6">
                <el-form-item label="仓库:" label-width="100px">
                  <el-select filterable size="small" style="width:190px" v-model="selectdata.warehouse" placeholder="全部">
                   <el-option v-for="(item,index) in warehouseLists" :key="index" :label="item.repositoryName" :value="item.id"> </el-option>
                 </el-select>
                </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="入库类型:" label-width="100px">
                  <el-select filterable size="small" style="width:190px" v-model="selectdata.outgoingtype" placeholder="全部">
                    <el-option v-for="item in outgoingtypeList" :key="item.index" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="" label-width="10px">
                 <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
                 </el-form-item>
                  <el-form-item label="" label-width="10px">
                 <el-button type="primary" v-if="setRole('导出')" size="mini" class="Button" @click="download">导出</el-button>
                 </el-form-item>
               </el-col>
           </el-row>
          <el-row>
             <el-col :span="6">
              <el-form-item label="开始时间:" label-width="100px" class="billdata">
               <el-date-picker class="delete" style="width:190px" value-format="yyyy-MM-dd" size="small" v-model="selectdata.timeStart" type="date" placeholder="选择日期">
               </el-date-picker>
              </el-form-item>
             </el-col>
              <el-col :span="6">
              <el-form-item label="结束时间:" label-width="100px" class="billdata">
               <el-date-picker class="delete" style="width:190px" value-format="yyyy-MM-dd" size="small" v-model="selectdata.timeEnd" type="date" placeholder="选择日期">
               </el-date-picker>
              </el-form-item>
             </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
             <el-form-item label="商品条码:" label-width="100px">
               <el-input class="input" clearable v-model="selectdata.barCode" size="small" placeholder="输入商品条码"></el-input>
             </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品货号:" label-width="100px">
               <el-input class="input" clearable v-model="selectdata.goodsCode" size="small" placeholder="输入商品货号"></el-input>
             </el-form-item>
            </el-col>
            <el-col :span="6">
             <el-form-item label="商品分类:" label-width="100px">
                <el-cascader size="small" style="width:190px" change-on-select  expand-trigger="hover" :options="commodityCategoryfunList" v-model="selectdata.commodityCategory" >
                </el-cascader>
             </el-form-item>
            </el-col>
           </el-row>
           <el-row>
             <el-col :span="6"> 
                <el-form-item label="商品批次:" label-width="100px">
                   <el-input class="input" clearable v-model="selectdata.commoditybatches" size="small" placeholder="输入商品批次"></el-input>
                </el-form-item>
             </el-col>
             <el-col :span="6">
              <el-form-item label="商品名称:" label-width="100px">
                <el-input class="input" clearable v-model="selectdata.tradeName" size="small" placeholder="输入商品名称"></el-input>
              </el-form-item>
             </el-col>
             <el-col :span="6">
              <el-form-item label="商品品牌:" label-width="100px">
               <el-select  size="small" filterable style="width:190px" v-model="selectdata.commodityBrand" placeholder="请先选择商品品牌">
                 <el-option v-for="(item,index) in commodityBrandList" :key="index" :label="item.name" :value="item.id"> </el-option>
               </el-select>
              </el-form-item>
             </el-col>
         </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table  :data="qutboundStatisticsList" stripe style="width: 100%" show-summary :summary-method="getSummaries">
          <el-table-column type="index" width="55" label="序号"></el-table-column>
          <el-table-column prop="shopName" label="商户名称" align="center" width="100"></el-table-column>
          <el-table-column prop="barCode" label="商品条码" align="center"></el-table-column>
          <el-table-column prop="goodsCode" label="商品货号" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="goodsBatchNumber" label="批次" align="center"></el-table-column>
            <el-table-column prop="parameter" label="商品规格" align="center" width="150">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.parameter" :key="index">
                <span v-if="item!=null">{{item.paramName}} :</span>
                <span v-if="item!=null"> {{item.paramValue}} </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="primaryClassify" label="商品分类" align="center" width="150"></el-table-column>
          <el-table-column prop="brand" label="商品品牌" align="center" ></el-table-column>
          <el-table-column prop="inType" label="入库类型" align="center" ></el-table-column>
          <el-table-column prop="warehouseName" label="仓库" align="center"></el-table-column>
          <el-table-column prop="unitName" label="库存单位" align="center" ></el-table-column>
          <el-table-column prop="inNum" label="入库数量" align="center" ></el-table-column>
          <el-table-column prop="inAmount" label="入库成本金额" align="center" width="150"></el-table-column>
       </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
 </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import {
  getRepositoryListPage,
  repertoryInBoundReport,
  getGoodsClassifyTreeList,
  getGoodsLabelListByShopId,
  repertoryInBoundReportExport
} from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId","power","companyName"]),
  data() {
    return {
      selectdata: {
        merchant:"",//商户
        warehouse:"",//仓库
        outgoingtype:"",//出库单位
        timeStart: "",//开始时间
        timeEnd: "",//结束时间
        barCode: "", //商品条码
        goodsCode:"",//商品货号
        commodityCategory: [""], //商品分类
        commoditybatches:"",//商品批次
        tradeName: "", //商品名称
        commodityBrand: "", //商品品牌
      },
      qutboundStatisticsList: [],
      //   分页
      pageSize: 10,
      totalItems: 0,
      currentPage: 1,
      inNumAmount: "",
      inPriceAmount:"",
      warehouseLists:[],//仓库下拉
      outgoingtypeList:[{
            id:"",
            name:"全部"
      },
      {
            id:"0",
            name:"其它入库"
      },
      {
            id:"1",
            name:"收货入库"
      },
       {
            id:"2",
            name:"盘盈入库"
      },
      {
            id:"3",
            name:"调拨入库"
      },
      {
            id:"4",
            name:"POS退货入库"
      },
      {
            id:"5",
            name:"期初入库"
      },
        {
            id:"6",
            name:"退货入库"
      },],//出库类型
      commodityCategoryfunList: [], //商品品类数组
      commodityBrandList: [], //商品品牌数组
      shopPullDownList: [], //店铺下拉
      exportData:{},//导出带的参数

    };
  },
  created() {},
  mounted() {
    this.warehouseList();
    this.commodityCategoryfun();
    this.commodityBrand();
    this.init()
  },
  methods: {
     init(){
        this.selectdata.merchant= this.companyName
      },
    setRole (key) {
     return util.selectTitle(this.power, key)
     },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      let primaryClassifyId = this.selectdata.commodityCategory[this.selectdata.commodityCategory.length-1] || '';
      let dailySales = {
        shopId:this.merchantId,
        shopName:this.selectdata.merchant,
        repositoryId:this.selectdata.warehouse,
        inType:this.selectdata.outgoingtype,
        startTime:this.selectdata.timeStart,
        endTime:this.selectdata.timeEnd,
        barCode:this.selectdata.barCode,
        goodsBatchNumber:this.selectdata.commoditybatches,
        goodsCode:this.selectdata.goodsCode,
        goodsName:this.selectdata.tradeName,
        brandId:this.selectdata.commodityBrand,
        primaryClassifyId:primaryClassifyId,
        pageNum: pageNum,
        pageSize: pageSize,
      };
       if(this.selectdata.timeStart==""){
          this.$message({
          type: "error",
          message: "请选择开始日期"
        });
      }else if(this.selectdata.timeEnd==""){
        this.$message({
          type: "error",
          message: "请选结束日期"
      })
      }else if(this.selectdata.timeStart > this.selectdata.timeEnd){
          this.$message({
          type: "error",
          message: "请确定开始日期小于或等于结束日期"
        });
      }else{
       this.exportData=dailySales
       repertoryInBoundReport(dailySales).then(res => {
        this.qutboundStatisticsList = res.data.list;
        this.totalItems = res.data.pageTotal;
        this.inNumAmount = res.data.inNumAmount;//汇总数据
        this.inPriceAmount = res.data.inPriceAmount;//汇总数据
      });
      }
    },

    // 搜索
    searchSelect() {
      this.currentPage=1;
      this.tableget(this.pageSize,this.currentPage);
    },
    //跳页
    toPage() {
       this.currentPage=1;
      this.tableget(this.pageSize,this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1;
      this.tableget(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, val);
    },
    // 仓库列表
     warehouseList() {
      getRepositoryListPage({
          shopId: this.merchantId
      }).then(res => {
          let a={
           id:"",
           repositoryName:"全部",
          }
        res.data.list.unshift(a)
        this.warehouseLists=res.data.list
      });
    },
    // 商品品类
    commodityCategoryfun() {
      getGoodsClassifyTreeList().then(res => {
        let a={
           value:"",
           label:"全部",
          }
        res.data.unshift(a)
        this.commodityCategoryfunList = res.data;
      });
    },
    // 商品品牌
    commodityBrand() {
      getGoodsLabelListByShopId({
        labelType: "0",
        shopId: this.merchantId
        }).then(res => {
          let a={
           id:"",
           name:"全部",
          }
        res.data.list.unshift(a)
        this.commodityBrandList = res.data.list;
      })
    },
    // 导出
    download() {
      if (this.qutboundStatisticsList.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        repertoryInBoundReportExport(this.exportData).then(res => {
          let fileName = "入库统计表.xlsx";
          fileDownload(res, fileName);
        });
      }
    },
    // 合计下面那一列
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "汇总";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        sums[12] = this.inNumAmount;
        sums[13] = this.inPriceAmount;
      });

      return sums;
    }
  }
};
</script>
<style scoped>
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
</style>
<style>
.warehousingstatistics .delete .el-input__suffix {
  display: none;
}
.warehousingstatistics .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.warehousingstatistics .el-form-item {
  margin-bottom: 10px;
}

</style>



